<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="./image/css/base.css"/>
	<style type="text/css">
		#div2{
			width: 200px;
			height: 200px;
			background-color: yellow;
		}
	</style>
	<body>
		<div id="div1" style="width: 200px;height: 200px;background-color: aqua;">
			第一个DIV
		</div>
		<div id="div2">
			第二个DIV
		</div>
		<div id="div3">
			第三个DIV
		</div>
		<br>
		<button type="button" onclick="test1();">样式测试1</button>
		<button type="button" onclick="test2();">样式测试2</button>
		<button type="button" onclick="test3();">样式测试3</button>
	</body>
	<script type="text/javascript">
		function test1(){
			var divtest1 = document.getElementById('div1')
			//获取样式
			console.log(divtest1.style.width)
			console.log(divtest1.style.height)
			console.log(divtest1.style.backgroundColor)
			//改变样式
			divtest1.style.backgroundColor = 'red';
			divtest1.style.width = '100px';
			divtest1.style.height = '100px';
		}
		function test2(){
			var divtest2 = document.getElementById('div2')
			var tempstyle = getComputedStyle(divtest2,null)
			console.log(tempstyle.width)
			console.log(tempstyle.height)
			console.log(tempstyle.backgroundColor)

			//获取样式
			// console.log(divtest2.style.width)
			// console.log(divtest2.style.height)
			// console.log(divtest2.style.backgroundColor)
			//改变样式
			divtest2.style.backgroundColor = 'red';
			divtest2.style.width = '100px';
			divtest2.style.height = '100px';
		}
		function test3(){
			var divtest3 = document.getElementById('div3')
			var tempstyle2 = getComputedStyle(divtest3,null)
			console.log(tempstyle2.width)
			console.log(tempstyle2.height)
			console.log(tempstyle2.backgroundColor)
			//获取样式
			// console.log(divtest3.style.width)
			// console.log(divtest3.style.height)
			// console.log(divtest3.style.backgroundColor)
			//改变样式
			divtest3.style.backgroundColor = 'red';
			divtest3.style.width = '100px';
			divtest3.style.height = '100px';
		}
	</script>
</html>
